﻿<UserControl
	xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
	xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
	x:Class="SkypieeClient.TabContent"
	x:Name="UserControl"
	Width="Auto" Height="Auto">

	<Grid x:Name="LayoutRoot">
		<Grid.Resources>
			<ResourceDictionary>
						 
				<ControlTemplate x:Key="GlassButton" TargetType="{x:Type Button}">
					<ControlTemplate.Resources>
						<Storyboard x:Key="Timeline1">
							<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="glow" Storyboard.TargetProperty="(UIElement.Opacity)">
								<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="1"/>
							</DoubleAnimationUsingKeyFrames>
						</Storyboard>
						<Storyboard x:Key="Timeline2">
							<DoubleAnimationUsingKeyFrames BeginTime="00:00:00" Storyboard.TargetName="glow" Storyboard.TargetProperty="(UIElement.Opacity)">
								<SplineDoubleKeyFrame KeyTime="00:00:00.3000000" Value="0"/>
							</DoubleAnimationUsingKeyFrames>
						</Storyboard>
					</ControlTemplate.Resources>
					<Border BorderBrush="#FFFFFFFF" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
						<Border x:Name="border" Background="#7F000000" BorderBrush="#FF000000" BorderThickness="1,1,1,1" CornerRadius="4,4,4,4">
							<Grid>
								<Grid.RowDefinitions>
									<RowDefinition Height="0.507*"/>
									<RowDefinition Height="0.493*"/>
								</Grid.RowDefinitions>
								<Border Opacity="0" HorizontalAlignment="Stretch" x:Name="glow" Width="Auto" Grid.RowSpan="2" CornerRadius="4,4,4,4">
									<Border.Background>
										<RadialGradientBrush>
											<RadialGradientBrush.RelativeTransform>
												<TransformGroup>
													<ScaleTransform ScaleX="1.702" ScaleY="2.243"/>
													<SkewTransform AngleX="0" AngleY="0"/>
													<RotateTransform Angle="0"/>
													<TranslateTransform X="-0.368" Y="-0.152"/>
												</TransformGroup>
											</RadialGradientBrush.RelativeTransform>
											<GradientStop Color="#B28DBDFF" Offset="0"/>
											<GradientStop Color="#008DBDFF" Offset="1"/>
										</RadialGradientBrush>
									</Border.Background>
								</Border>
								<ContentPresenter HorizontalAlignment="Center" VerticalAlignment="Center" Width="Auto" Grid.RowSpan="2"/>
								<Border HorizontalAlignment="Stretch" Margin="0,0,0,0" x:Name="shine" Width="Auto" CornerRadius="4,4,0,0">
									<Border.Background>
										<LinearGradientBrush EndPoint="0.494,0.889" StartPoint="0.494,0.028">
											<GradientStop Color="#99FFFFFF" Offset="0"/>
											<GradientStop Color="#33FFFFFF" Offset="1"/>
										</LinearGradientBrush>
									</Border.Background>
								</Border>
							</Grid>
						</Border>
					</Border>
					<ControlTemplate.Triggers>
						<Trigger Property="IsPressed" Value="True">
							<Setter Property="Opacity" TargetName="shine" Value="0.4"/>
							<Setter Property="Background" TargetName="border" Value="#CC000000"/>
							<Setter Property="Visibility" TargetName="glow" Value="Hidden"/>
						</Trigger>
						<Trigger Property="IsMouseOver" Value="True">
							<Trigger.EnterActions>
								<BeginStoryboard Storyboard="{StaticResource Timeline1}"/>
							</Trigger.EnterActions>
							<Trigger.ExitActions>
								<BeginStoryboard x:Name="Timeline2_BeginStoryboard" Storyboard="{StaticResource Timeline2}"/>
							</Trigger.ExitActions>
						</Trigger>

						<EventTrigger RoutedEvent="UIElement.MouseEnter">
							<BeginStoryboard>
								<Storyboard>
									<DoubleAnimation To="170"
										Storyboard.TargetProperty="Height"
										Duration="0:0:0.1" />
									<DoubleAnimation To="140"
										Storyboard.TargetProperty="Width"
										Duration="0:0:0.1" />
								</Storyboard>
							</BeginStoryboard>
						</EventTrigger>

						<EventTrigger RoutedEvent="UIElement.MouseLeave">
							<BeginStoryboard>
								<Storyboard>
									<DoubleAnimation To="160"
										Storyboard.TargetProperty="Height"
										Duration="0:0:0.3" />
									<DoubleAnimation To="130"
										Storyboard.TargetProperty="Width"
										Duration="0:0:0.3" />
								</Storyboard>
							</BeginStoryboard>
						</EventTrigger>
					</ControlTemplate.Triggers>


				</ControlTemplate>

				<Style x:Key="WrapItemTemplate" TargetType="{x:Type ListBox}">
					<!-- Set the ItemTemplate of the ListBox to a DataTemplate which 
					               explains how to display an object of type BitmapImage. -->
					<Style.Triggers>
						<Trigger Property="IsEnabled" Value="False">
							<Setter Property="Background" Value="#000000"/>
						</Trigger>
					</Style.Triggers>

					<Setter Property="Foreground" Value="White"/>
					<Setter Property="Background" Value="Transparent"/>
					<Setter Property="BorderBrush" Value="Transparent"/>
					<Setter Property="ItemTemplate">
						<Setter.Value>
							<DataTemplate>
								<Border Height="170" Width="140" VerticalAlignment="Center" HorizontalAlignment="Center">
									<Border.LayoutTransform>
										<ScaleTransform x:Name="uiZoomTransform"
											ScaleX="{Binding Path=Scale, ElementName=UserControl}"
											ScaleY="{Binding Path=Scale, ElementName=UserControl}"/>

									</Border.LayoutTransform>

									<Button Width="130" Height="160" Foreground="#FFFFFFFF" x:Name="Button1"
										Template="{DynamicResource GlassButton}"
										Margin="0" HorizontalAlignment="Center"
										VerticalAlignment="Center" Focusable="False" Tag="{Binding Path=IUser}"
										Click="Button_Click">
										<Button.ToolTip>
											<ToolTip Content="{Binding Path=Handle}"/>
										</Button.ToolTip>

										<StackPanel>
											<Image x:Name="AssociatedImage" Source="{Binding Path=AvatarPath}" Width="100"
												Height="100" Stretch="Uniform" StretchDirection="Both" Margin="0,10,0,0" VerticalAlignment="Center"/>

											<Label x:Name="text" Foreground="#FFFFFFFF" Content="{Binding Path=Handle}"
												Height="22" Padding="5,0,5,5" Tag="{Binding Path=IUser}"
												Loaded="Label_Loaded"
												HorizontalAlignment="Center" Margin="0,8,0,0"/>

											<Label x:Name="textDisplayName" Height="22" Foreground="#FFFFFFFF" Content="{Binding Path=DisplayName}"
												HorizontalAlignment="Center" Padding="5,0,5,5" Margin="0,0,0,0" Tag="{Binding Path=IUser}"
												Loaded="Label_Loaded" />

										</StackPanel>


									</Button>

								</Border>


							</DataTemplate>
						</Setter.Value>
					</Setter>
					<!-- Swap out the default items panel with a WrapPanel so that
					         the images will be arranged with different layout. -->
					<Setter Property="ItemsPanel">
						<Setter.Value>
							<ItemsPanelTemplate>
								<WrapPanel />
							</ItemsPanelTemplate>
						</Setter.Value>
					</Setter>

					<!-- Set this attached property to 'Disabled' so that the 
					               ScrollViewer in the ListBox will never show a horizontal 
					           scrollbar, and the WrapPanel it contains will be constrained to
					           the width of the ScrollViewer's viewable surface. -->
					<Setter Property="ScrollViewer.HorizontalScrollBarVisibility" Value="Disabled" />
					<Setter Property="ScrollViewer.VerticalScrollBarVisibility" Value="Auto" />
					<Setter Property="ScrollViewer.CanContentScroll" Value="True" />

				</Style>

			</ResourceDictionary>
		</Grid.Resources>
		<!--
					<Grid.Background>
						<ImageBrush ImageSource="Resources/bg.png" Opacity="0.45" >
						</ImageBrush >
					</Grid.Background>
-->

		<!-- SEARCH PANEL -->
		<!-- NOTE : there is a listbox added to this panel in code 
				           behind at runtime -->

		<ListBox x:Name="ListBox1" Margin="0,0,0,0" Style="{DynamicResource WrapItemTemplate}"
			VerticalAlignment="Stretch" Height="Auto" Loaded="ListBox1_Loaded"/>



	</Grid>

</UserControl>